<template>
	<view class="content" :style="showPicker ? 'overflow: hidden;height: 100vh;' : ''">
		<view class="picker-index title-top">
			<view class="picker-name" @click="showPicker = true">{{ selectedRegion || '请选择地址' }}</view>
			<view class="picker-image" >
				<img src="@/static/main/down.png" style="height: 28rpx; width: 28rpx" />
			</view>
			<view class="picker-search">
				<u-search placeholder="搜索宝贝,开启租赁新生活" :show-action="false" :clearabled="true" v-model="keyword" @change="searList"></u-search>
			</view>
		</view>

		<view v-if="!keyword">
			<view class="container">
				<!-- 中间：图片区域 -->
				<view class="image-container" style="position: relative">
					<image :src="path + slideshowList[currentIndex].img" class="img" mode="aspectFill"></image>

					<view class="title-bottom" style="position: absolute; bottom: 20rpx">
						<view class="bottom" v-for="(item, index) in slideshowList" :key="index" :class="['bottom', currentIndex === index ? 'active' : '']"></view>
					</view>
				</view>
			</view>

			<!-- 分类 -->
			<view class="imgs">
				<imgs :imgList="goods"></imgs>
			</view>

			<view class="sift" v-if="tagList[0]">
				<view class="sift-h">
					<h3>热门精选</h3>
				</view>
				<view class="sift-img">
					<view class="sift-images" v-for="(item, index) in tagList[0].leaseGoodVos" v-if="index < 4">
						<image class="image-list" :src="item.mainImage" mode="aspectFill" @click="commodityUrl(item.id)"></image>
						<text>{{ item.productName }}</text>
						<view class="tag">￥{{ item.leaseGoodSkus[0].leaseRentalRules[0].everydayPrice || '' }}/天</view>
					</view>
				</view>
			</view>

			<view class="sift color-b" v-if="tagList[1]">
				<view class="sift-h">
					<h3 style="color: #000">大牌推荐</h3>
				</view>
				<view class="sift-img">
					<view class="sift-images" style="color: black;" v-for="(item, index) in tagList[1].leaseGoodVos" v-if="index < 4">
						<image class="image-list" :src="url+item.mainImage" mode="aspectFill" @click="commodityUrl(item.id)"></image>
						<text style="text-align:center;">{{ item.productName }}</text>
						<view class="tag-b">￥{{ item.leaseGoodSkus[0].leaseRentalRules[0].everydayPrice || '' }}/天</view>
					</view>
				</view>
			</view>

			<view class="container">
				<!-- 		<view class="title-list">
				<text v-for="(item, index) in list" :key="index" :class="['title-item', currentIndex === index ? 'active' : '']" @click="changeSlide(index)">
					{{ item.name }}
				</text>
			</view> -->

				<view class="title-list">
					<text v-for="(item, index) in ['优选好物', '实惠全品类', '月付无压力']" :key="index" :class="['title-item', 0 === index ? 'active' : '']">
						{{ item }}
					</text>
				</view>

				<!-- 中间：图片区域 -->
				<view class="image-container">
					<image :src="path + slideshowList[currentIndex].img" class="carousel-image" mode="aspectFill"></image>
				</view>

				<view class="title-bottom">
					<view class="bottom" v-for="(item, index) in slideshowList" :key="index" :class="['bottom', currentIndex === index ? 'active' : '']"></view>
				</view>
			</view>

			<view class="prefecture" v-if="tagList[2]">
				<view class="sift-h">
					<h3>优惠专区</h3>
				</view>
				<text class="text-url">优惠专区 查看更多</text>
				<view class="prefecture-img">
					<view class="prefecture-images" v-for="(item, index) in tagList[2].leaseGoodVos" v-if="index < 3">
						<image class="img-list" :src="url+item.mainImage" @click="commodityUrl(item.id)"></image>
						<view class="text">
							<text class="tag">全新</text>
							<text class="name">{{ item.productName }}</text>
						</view>
						<view class="text">
							<view class="numberDate">￥{{ item.leaseGoodSkus[0].leaseRentalRules[0].everydayPrice || '' }}/天</view>
							<text class="tag">惠</text>
						</view>
					</view>
				</view>
			</view>

			<view class="hot">
				<view class="hot-top">
					<view class="name">
						<view class="border-left"></view>
						热门产品
					</view>
					<view v-for="(item, index) in data" class="hot-text">
						<text>{{ item }}</text>
					</view>
				</view>

				<recommend :imageList="list"></recommend>
			</view>

			<u-picker :show="showPicker" :columns="columns" @confirm="onConfirm" @cancel="onCancel"></u-picker>
		</view>
		<view v-else>  
			<recommend :imageList="list"></recommend>
		</view>
	</view>
</template>

<script>
import imgs from '@/subPages/components/custom/imgs.vue';
import recommend from '@/subPages/components/recommend.vue';
import api from '../api/index.js';
import main from '../api/main.js';
import { baseUrl } from '../config.js';
export default {
	components: {
		imgs,
		recommend
	},
	data() {
		return {
			keyword: '',
			currentIndex: 0,
			autoPlayTimer: null,
			url:"",
			showPicker: false,
			data: ['品质认证', '便携效率', '精心挑选'],
			columns: [
				[
					{ text: '北京', value: '440306' },
					{ text: '上海', value: '4403' },
					{ text: '广州', value: '44' },
					{ text: '深圳', value: '440306' }
				]
			],
			selectedRegion: '',
			goods: [],
			slideshowList: [],
			list: [],
			tagList: [],
			path: api.getPath(),
			pageNo: 1,
			pageSize: 10,
			total: 0
		};
	},
	onLoad() {},
	mounted() {
		console.log(baseUrl);
		this.url = baseUrl;
		//获取商品
		this.getList();
		//获取商品分类
		this.getClass();
		//获取轮播图
		this.getBanner();
		//标签分类商品
		this.getTatList();
		this.startAutoPlay();
	},
	beforeDestroy() {
		this.stopAutoPlay(); // 组件销毁前清除定时器
	},
	onReachBottom() {
		if (this.total > this.pageNo * this.pageSize) {
			this.pageNo++;
			this.getFriendsPage();
		}
	},
	methods: {
		//搜索
		searList() {
			this.getList();
		},
		//查询商品分
		getClass() {
			let _this = this;
			main.getGoodsClass()
				.then((data) => {
					_this.goods = data.rows;
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		//商品
		getList() {
			let _this = this;
			console.log('_this.keyword', _this.keyword);
			let Inputdata = {
				productName: _this.keyword,
				pageNo: _this.pageNo,
				pageSize: _this.pageSize
			}
			console.log("dasd",Inputdata)
			main.getList(Inputdata)
				.then((data) => {
					console.log('asaasa', data);
					_this.list = data.rows;
					_this.total = data.total;
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		getFriendsPage() {
			let _this = this;
			main.getList({
				productName: _this.keyword,
				pageNo: _this.pageNo,
				pageSize: _this.pageSize
			})
				.then((data) => {
					_this.list.push(...data.rows);
					_this.total = data.total;
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		//标签分类商品
		getTatList() {
			let _this = this;
			main.getTatList()
				.then((data) => {
					console.log('商品', data);
					_this.tagList = data.rows;
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		//详情跳转
		commodityUrl(id) {
			uni.navigateTo({
				url: '/subPages/main/commodity?id=' + id
			});
		},
		//轮播图
		getBanner() {
			let _this = this;
			main.getBannerList()
				.then((data) => {
					_this.slideshowList = data.rows;
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		onConfirm(e) {
			console.log(e);
			this.selectedRegion = e.value[0].text; // 使用 text 显示选中的地区
			this.showPicker = false;
		},
		onCancel() {
			this.showPicker = false;
		},
		// 切换图片和介绍
		changeSlide(index) {
			this.currentIndex = index;
		}, // 开始自动轮播
		startAutoPlay() {
			this.stopAutoPlay(); // 防止重复启动
			this.autoPlayTimer = setInterval(() => {
				this.currentIndex = (this.currentIndex + 1) % this.slideshowList?.length;
			}, 3000); // 每3秒切换一次
		},
		// 停止自动轮播
		stopAutoPlay() {
			if (this.autoPlayTimer) {
				clearInterval(this.autoPlayTimer);
				this.autoPlayTimer = null;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.picker-index {
	display: flex;
	align-items: center;
	padding-top: 20rpx;

	.picker-name {
		font-size: 26rpx;
		margin-left: 20rpx;
	}
	.picker-image {
		margin-left: 10rpx;
	}
	.picker-search {
		display: flex;
		margin-left: 20rpx;
	}
}

.img {
	margin-top: 35rpx;
	width: 100%;
	height: 300rpx;
	border-radius: 15rpx;
}

.imgs {
	border-radius: 15rpx;
	margin-top: 35rpx;
	width: 100%;
	background-color: #fff;
}

.sift {
	width: 100%;
	height: 350rpx;
	background-color: #000;
	border-radius: 25rpx 25rpx 0 0;
	position: relative;

	.sift-h {
		display: flex;
		h3 {
			font-weight: bold;
			font-size: 35rpx;
			color: gold;
			margin: 25rpx;
		}
	}

	.sift-img {
		position: absolute;
		top: 100rpx;
		width: 100%;
		height: 250rpx;
		border-radius: 25rpx 25rpx 0 0;
		background-color: #fff;

		display: flex;
		justify-content: space-around;

		.sift-images {
			margin-top: 20rpx;
			font-size: 26rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				margin-bottom: 7rpx;
			}

			text {
				width: 100rpx;
				display: -webkit-box;
				-webkit-line-clamp: 1; /* 限制为两行 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.tag {
				font-weight: 600;
				margin-top: 10rpx;
				color: crimson;
			}
		}
	}
}

.color-b {
	margin-top: 50rpx;
	background-color: brown;

	.tag-b {
		font-weight: 400;
		font-size: 25rpx;
		margin-top: 10rpx;
		line-height: 40rpx;
		padding: 0 15rpx;
		color: crimson;
		background-color: pink;
		border-radius: 25rpx;
	}
}

.container {
	width: 100%;
	margin-top: 30rpx;

	.title-list {
		margin-bottom: 30rpx;
		.title-item {
			margin-right: 10rpx;
		}
		.active {
			font-size: 35rpx;
			font-weight: bold;
		}
	}

	.image-container {
		.carousel-image {
			width: 100%;
			height: 250rpx;
		}
	}

	.title-bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.bottom {
			width: 15rpx;
			height: 15rpx;
			margin-left: 10rpx;
			border-radius: 10rpx;
			background-color: #000;
		}

		.active {
			width: 30rpx;
			background-color: paleturquoise;
		}
	}
}

.prefecture {
	margin-top: 30rpx;
	width: 100%;
	background: linear-gradient(to bottom, #ffb17d, #ffffff 90%);
	border-radius: 20rpx;
	padding-bottom: 20rpx;
	position: relative;

	.text-url {
		position: absolute;
		font-size: 26rpx;
		color: #c77b5d;
		top: 0rpx;
		right: 0rpx;
		display: block;
		padding: 15rpx 45rpx;
		border-radius: 0 0 0 250rpx;
		background: linear-gradient(to bottom, #ffb17d, #ffffff 130%);
	}
	.sift-h {
		display: flex;
		h3 {
			font-weight: bold;
			font-size: 35rpx;
			margin: 25rpx;
			margin-bottom: 0;
		}
	}
	.prefecture-img {
		display: flex;
		justify-content: space-between;
		.prefecture-images {
			margin: 0 30rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			align-items: center;

			.text {
				width: 150rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.tag {
					font-size: 25rpx;
					background-color: rosybrown;
					color: red;
					margin-right: 5rpx;
					white-space: nowrap;
				}
				.name {
					display: -webkit-box;
					-webkit-line-clamp: 1; /* 限制为两行 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.numberDate {
					font-size: 25rpx;
					font-weight: 500;
					color: red;
				}
			}
		}
	}
}

.hot {
	margin-top: 30rpx;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.hot-top {
		display: flex;
		align-items: center;

		.name {
			display: flex;
			align-items: center;
			.border-left {
				margin-right: 30rpx;
				height: 60rpx;
				width: 15rpx;
				border-radius: 10rpx;
				background-color: aqua;
			}
			font-weight: bold;
			font-size: 33rpx;
		}
		.hot-text {
			margin-left: 20rpx;
			font-size: 25rpx;
			background-color: paleturquoise;
			padding: 0 10rpx;
			border-radius: 50rpx;
			line-height: 40rpx;
		}
	}
}
</style>
